<div>
  <p>Is Browser: {{ platform.isBrowser }}</p>
  <p>Is Android: {{ platform.ANDROID }}</p>
  <p>Is iOS: {{ platform.IOS }}</p>
  <p>Is Firefox: {{ platform.FIREFOX }}</p>
  <p>Is Blink: {{ platform.BLINK }}</p>
  <p>Is Webkit: {{ platform.WEBKIT }}</p>
  <p>Is Trident: {{ platform.TRIDENT }}</p>
  <p>Is Edge: {{ platform.EDGE }}</p>
</div>

<h2>目前瀏覽器支援的input types</h2>
<ul>
    <li *ngFor="let type of supportInputTypes">{{ type }}</li>
</ul>

<app-coercion-demo-box display="true" height="10" values="a"></app-coercion-demo-box>

<mat-form-field>
  <input matInput type="input" [(ngModel)]="name" />
</mat-form-field>
<div class="portal-demo">
  <div class="tabs">
    <button mat-button (click)="changePortal1()">功能1</button>
    <button mat-button (click)="changePortal2()">功能2</button>
    <button mat-button (click)="changePortal3()">功能3</button>
    <button mat-button (click)="changePortal4()">功能4</button>
  </div>
  <div class="tab-content">
    <div [cdkPortalOutlet]="currentPortal"></div>
  </div>
</div>

<ng-template cdkPortal let-nameInTemplate="nameInObject">
  <p>
    Hi，{{ nameInTemplate }}，功能1：我放在ng-template + cdkPortal = TemplatePortal裡面
  </p>
</ng-template>

<p *cdkPortal>
  功能2：我放在一般的HTML Element內，加上cdkPortal後變成了一個TemplatePortal
</p>

<ng-template #template let-nameInTemplate="nameInObject">
  Hi，{{ nameInTemplate }}，功能3：我放在ng-template內，但不是TemplatePortal，要用我要記得先包裝一下
</ng-template>

<app-cdk-observe-content-demo>
  {{ displayContent }}
</app-cdk-observe-content-demo>

<div>
  <button mat-raised-button color="primary" (click)="displayContent = displayContent + 1">變更內容</button>
</div>

<button mat-raised-button color="primary">Hello World！</button>

<div>
  Hello, 您登入的使用者帳號為
  <mat-icon>person</mat-icon>：wellwind
</div>

<div>
  這是一般的ICON顏色
  <mat-icon>person</mat-icon>
</div>

<div>
  這是加上primary顏色的ICON
  <mat-icon color="primary">thumb_up</mat-icon>
</div>

<div>
  這是加上accent顏色的ICON
  <mat-icon color="accent">info</mat-icon>
</div>

<div>
  這是加上warn顏色的ICON
  <mat-icon color="warn">warning</mat-icon>
</div>

<h2>自行註冊SVG icon</h2>

<div>
  <mat-icon svgIcon="custom-svg:angular"></mat-icon>
  <mat-icon svgIcon="custom-svg:angular" color="primary"></mat-icon>
  <mat-icon svgIcon="custom-svg:angular" color="accent"></mat-icon>
  <mat-icon svgIcon="custom-svg:angular" color="warn"></mat-icon>
</div>

<h2>在MatIcon中使用FontAwesome</h2>

<div>
  <mat-icon fontSet="fontawesome" fontIcon="fa-thumbs-up"></mat-icon>
  <mat-icon fontSet="fontawesome" fontIcon="fa-thumbs-up" color="primary"></mat-icon>
  <mat-icon fontSet="fontawesome" fontIcon="fa-thumbs-up" color="accent"></mat-icon>
  <mat-icon fontSet="fontawesome" fontIcon="fa-thumbs-up" color="warn"></mat-icon>
</div>

<h2>扁平化按鈕(mat-button)</h2>
<div>
  <button mat-button>我是按鈕</button>
  <button mat-button color="primary">Primary</button>
  <button mat-button color="accent">Accent</button>
  <button mat-button color="warn">Warn</button>
  <button mat-button disabled>Disabled</button>
  <a mat-button>Link</a>
</div>

<h2>凸起的按鈕(mat-raised-button)</h2>
<div>
  <button mat-raised-button>我是raised按鈕</button>
  <button mat-raised-button color="primary">Primary</button>
  <button mat-raised-button color="accent">Accent</button>
  <button mat-raised-button color="warn">Warn</button>
  <button mat-raised-button disabled>Disabled</button>
  <a mat-button>Link</a>
</div>

<h2>按鈕+Icon</h2>
<div>
  <button mat-raised-button color="primary">
    <mat-icon>thumb_up</mat-icon> 我有Icon</button>
  <button mat-raised-button color="primary">
    <mat-icon>thumb_up</mat-icon>
  </button>
  <button mat-icon-button color="primary">
    <mat-icon>thumb_up</mat-icon>
  </button>
  <button mat-raised-button mat-icon-button color="primary">
    <mat-icon>thumb_up</mat-icon>
  </button>
</div>

<h2>mat-fab</h2>
<div>
  <button mat-fab>
    <mat-icon>thumb_up</mat-icon>
  </button>
  <button mat-fab color="primary">
    <mat-icon>thumb_up</mat-icon>
  </button>
  <button mat-fab color="accent">
    <mat-icon>thumb_up</mat-icon>
  </button>
  <button mat-fab color="warn">
    <mat-icon>thumb_up</mat-icon>
  </button>
  <button mat-fab disabled>
    <mat-icon>thumb_up</mat-icon>
  </button>
</div>

<h2>mat-mini-fab</h2>
<div>
  <button mat-mini-fab>
    <mat-icon>thumb_up</mat-icon>
  </button>
  <button mat-mini-fab color="primary">
    <mat-icon>thumb_up</mat-icon>
  </button>
  <button mat-mini-fab color="accent">
    <mat-icon>thumb_up</mat-icon>
  </button>
  <button mat-mini-fab color="warn">
    <mat-icon>thumb_up</mat-icon>
  </button>
  <button mat-mini-fab disabled>
    <mat-icon>thumb_up</mat-icon>
  </button>
</div>

<h2>按鈕開關</h2>
<mat-button-toggle>我是個開關</mat-button-toggle>

<h2>按鈕開關群組</h2>
<mat-button-toggle-group #formatAlignGroup="matButtonToggleGroup">
  <!-- button toogle所代表的值 -->
  <mat-button-toggle value="left">
    <mat-icon>format_align_left</mat-icon>
  </mat-button-toggle>
  <!-- 預設被選取 -->
  <mat-button-toggle value="center" checked="true">
    <mat-icon>format_align_center</mat-icon>
  </mat-button-toggle>
  <mat-button-toggle value="right">
    <mat-icon>format_align_right</mat-icon>
  </mat-button-toggle>
  <!-- 不允許選擇的button toggle -->
  <mat-button-toggle value="justify" disabled>
    <mat-icon>format_align_justify</mat-icon>
  </mat-button-toggle>
</mat-button-toggle-group>
<div>對齊方式為：{{ formatAlignGroup.value }}</div>

<!-- 加上multiple，則裡面的mat-buttong-toggle可以複選 -->
<!-- 加上vertical="true", 改變排列方式 -->
<mat-button-toggle-group multiple vertical="true" #formatTextGroup="matButtonToggleGroup">
  <mat-button-toggle value="bold" #buttonToggleBold>
    <mat-icon>format_bold</mat-icon>
  </mat-button-toggle>
  <mat-button-toggle value="italic" checked="true" #buttonToggleItalic>
    <mat-icon>format_italic</mat-icon>
  </mat-button-toggle>
  <mat-button-toggle value="underlined" checked="true" #buttonToggleUnderlined>
    <mat-icon>format_underlined</mat-icon>
  </mat-button-toggle>
</mat-button-toggle-group>
<div>粗體：{{ buttonToggleBold.checked }}、斜體：{{ buttonToggleItalic.checked }}、底線：{{ buttonToggleUnderlined.checked }}</div>

<h2>漣漪效果(mat-ripple)</h2>

<div class="demo-ripple-container" mat-ripple [matRippleCentered]="false" [matRippleDisabled]="false" [matRippleUnbounded]="false"
  [matRippleRadius]="10" [matRippleColor]="'pink'" [matRippleSpeedFactor]="0.5"></div>

<button mat-raised-button (click)="triggerRipple()">觸發漣漪效果</button>
<button mat-raised-button (click)="clearRipple()">清除漣漪效果</button>

<h2>FocusTrap</h2>
<button (click)="displayFocusTrap = !displayFocusTrap">顯示輸入項</button>
<input value="cdkTrapFocus外的Input">
<div cdkTrapFocus *ngIf="displayFocusTrap" cdkTrapFocusAutoCapture="true">
  <input value="1" cdkFocusInitial>
  <input value="2" cdkFocusRegionStart>
  <input value="3">
  <input value="4" cdkFocusRegionEnd>
</div>

<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>

<div>
  <button matButton (click)="createOutletOutOfApp()">使用DomPortalOutlet產生插座</button>
  <button matButton (click)="addTemplatePortal()">插入內容</button>
</div>
